<template>
  <div id="interfaceInfoDetailPage">
    <div :style="{ display: 'flex' }">
      <a-card :style="{ width: '100%' }" :title="dataInterfaceInfo?.name">
        <a-list :hoverable="true">
          <a-list-item>
            <a-row>
              <a-col :span="8">
                接口地址:
                <a-typography-text copyable>
                  {{ dataInterfaceInfo?.url }}
                </a-typography-text>
              </a-col>
              <a-col :span="8">
                返回格式:{{ dataInterfaceInfo?.returnFormat }}
              </a-col>
              <a-col :span="8">
                接口状态:{{ dataInterfaceInfo?.status }}
              </a-col>
            </a-row>
          </a-list-item>
          <a-list-item>
            <a-row>
              <a-col :span="8">
                请求方式:
                <a-tag
                  bordered
                  :color="
                    dataInterfaceInfo?.method === 'GET' ? 'blue' : 'purple'
                  "
                  >{{ dataInterfaceInfo?.method }}
                </a-tag>
              </a-col>
              <a-col :span="8"> dsfadsfadsf</a-col>
              <a-col :span="8">
                接口状态:{{ dataInterfaceInfo?.status }}
              </a-col>
            </a-row>
          </a-list-item>
        </a-list>
        <a-card>
          <a-tabs>
            <a-tab-pane key="1">
              <template #title>
                <icon-calendar />
                API文档
              </template>
              <a-divider direction="vertical" />
              <span>请求参数说明：</span>
              <a-table
                :columns="columnsRequest"
                :pagination="false"
                :data="dataRequest"
                style="margin-top: 20px"
              />
              <div style="margin-top: 18px">
                <a-divider direction="vertical" />
                <span>响应参数说明：</span>
              </div>
              <a-table
                :columns="columnsResponse"
                :pagination="false"
                :data="dataResponse"
                style="margin-top: 20px"
              />
              <highlightjs
                language="json"
                :code="JSON.stringify(dataResponse, null, 4)"
              />
            </a-tab-pane>
            <a-tab-pane key="2">
              <template #title>
                <icon-clock-circle />
                在线调试工具
              </template>
              <a-form :model="form" @submit="handleSubmit">
                <a-space direction="vertical">
                  <a-form-item style="width: 70%; margin: 0 auto">
                    <a-input size="large" v-model="url" readonly>
                      <template #prepend>
                        {{ dataInterfaceInfo?.method }}
                      </template>
                    </a-input>
                    <a-button html-type="submit" type="primary"
                      >发送请求
                    </a-button>
                  </a-form-item>
                  <a-row>
                    <a-col :span="8">参数名称</a-col>
                    <a-col :span="8">参数值</a-col>
                    <a-col :span="8">操作</a-col>
                  </a-row>
                  <a-empty v-show="!form.length > 0" />
                  <a-form-item
                    v-for="(post, index) of form"
                    :field="`posts[${index}].value`"
                    :key="index"
                  >
                    <a-input v-model="post.key" placeholder="请输入key" />
                    <a-input v-model="post.value" placeholder="请输入value" />
                    <a-button
                      @click="handleDelete(index)"
                      :style="{ marginLeft: '10px' }"
                      >删除
                    </a-button>
                  </a-form-item>
                </a-space>
              </a-form>
              <div
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <a-button @click="handleAdd" style="width: 100%" type="dashed"
                  >添加一行数据
                </a-button>
              </div>
              <a-divider direction="vertical" />
              <span>返回结果：</span>
              <a-empty
                v-show="!resultResponse"
                :description="isShow ? '未发起调用，暂无响应信息' : ''"
              >
                <template #image>
                  <a-spin :hide-icon="isShow" />
                </template>
              </a-empty>
              <div v-if="resultResponse" class="parent">
                <highlightjs
                  language="json"
                  :code="JSON.stringify(resultResponse, null, 4)"
                />
                <icon-copy
                  class="fixed-top-right"
                  :data-clipboard-text="JSON.stringify(resultResponse, null, 4)"
                  v-on:click="copyCode"
                />
              </div>
            </a-tab-pane>
            <a-tab-pane key="3">
              <template #title>
                <icon-user />
                示例代码
              </template>
              Content of Tab Panel 3
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, watchEffect } from "vue";
import API from "@/api";
import {
  getInterfaceInfoByIdUsingGet,
  invokeInterfaceInfoUsingPost,
} from "@/api/interfaceInfoController";
import { useRoute } from "vue-router";
import message from "@arco-design/web-vue/es/message";
import { Message } from "@arco-design/web-vue";
import Clipboard from "clipboard";

const route = useRoute();
const dataInterfaceInfo = ref<API.InterfaceInfoVO>();
const dataRequest = ref<API.RequestParams[]>([]);
const dataResponse = ref<API.ResponseParams[]>([]);
const url = ref<string>();
const resultResponse = ref();
const isShow = ref(true);
const loadData = async () => {
  const res = await getInterfaceInfoByIdUsingGet({
    id: route.params.id as any,
  });
  if (res.data.code == 200) {
    dataInterfaceInfo.value = res.data.data;
    dataRequest.value = res.data.data?.requestParams;
    dataResponse.value = res.data.data?.responseParamsList;
    url.value = res.data.data?.url;
  } else {
    message.error("获取数据失败" + res.data.message);
  }
};
const form = reactive([{ key: "", value: "" }]);
const interfaceParams = reactive({
  id: route.params.id as any,
  requestParams: "",
} as API.InterfaceInfoInvokeRequest);
const handleAdd = () => {
  form.push({
    key: "",
    value: "",
  });
};

const handleDelete = (index) => {
  form.splice(index, 1);
};
const handleSubmit = async (data) => {
  isShow.value = false;
  const newObj = transformArray(data.values);
  interfaceParams.requestParams = JSON.stringify(newObj);
  const res = await invokeInterfaceInfoUsingPost(interfaceParams);
  if (res.data.code == 200) {
    resultResponse.value = res.data.data;
    isShow.value = true;
    Message.success("接口调用成功");
  } else {
    message.error("接口调用错误" + res.data.message);
  }
};

function transformArray(arr) {
  const newArr = [];
  for (const obj of arr) {
    const newObj = {};
    for (const key in obj) {
      if (key === "key") {
        newObj[obj[key]] = obj.value;
      }
    }
    newArr.push(newObj);
  }
  return newArr;
}

//复制响应的代码
const copyCode = () => {
  let clipboard = new Clipboard(".fixed-top-right");
  clipboard.on("success", (e) => {
    Message.success("复制成功");
    // 释放内存
    clipboard.destroy();
  });
  clipboard.on("error", (e) => {
    // 不支持复制
    Message.error("该浏览器不支持自动复制");
    // 释放内存
    clipboard.destroy();
  });
};

watchEffect(() => {
  loadData();
});
const columnsRequest = [
  {
    title: "参数名称",
    dataIndex: "fieldName",
  },
  {
    title: "类型",
    dataIndex: "type",
  },
  {
    title: "必须",
    dataIndex: "required",
  },
  {
    title: "描述",
    dataIndex: "desc",
  },
];
const columnsResponse = [
  {
    title: "参数名称",
    dataIndex: "fieldName",
  },
  {
    title: "类型",
    dataIndex: "type",
  },
  {
    title: "描述",
    dataIndex: "desc",
  },
];
</script>
<style scoped>
#interfaceInfoDetailPage {
}

.arco-divider-vertical {
  display: inline-block;
  min-width: 3px;
  max-width: 3px;
  min-height: 3em;
  margin: 0 5px;
  vertical-align: middle;
  border-left: 3px skyblue solid;
  border-radius: 50px 50px 50px 50px;
}

.fixed-top-right {
  position: absolute;
  top: 285px;
  right: 20px;
  display: none;
  cursor: pointer;
}

.parent:hover .fixed-top-right {
  display: block;
}
</style>
